<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="icon" href="${una}/admin/img/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="${una}/admin/img/favicon.png" type="image/x-icon">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <title>分类 - UnaBoot</title>
    <link rel="stylesheet" href="${una}/admin/plugins/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="${una}/admin/css/font-awesome.css">
    <link rel="stylesheet" href="${una}/admin/css/ionicons.css">
    <link rel="stylesheet" href="${una}/admin/css/adminlte.min.css">
    <link rel="stylesheet" href="${una}/admin/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" />
    <link rel="stylesheet" href="${una}/admin/plugins/layer/skin/default/layer.css"/>
    <link rel="stylesheet" href="${una}/admin/css/unaboot-admin.css">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">
<div class="wrapper">
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <#include "/admin/common/header.html"/>
    </nav>
    <aside class="main-sidebar sidebar-dark-teal  elevation-4 ">
       <#include "/admin/common/menu.html"/>
    </aside>
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h3 class="m-0 text-dark text-lg">栏目列表</h3>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body  p-0">
                                <div class="channel-left">
                                    <div class="header pl-4 pr-4 pt-4 pb-2">
                                        <h5>网站栏目树</h5>
                                    </div>
                                    <div class="channel-tree pl-4 pr-4 pt-2 pb-2">
                                        <ul id="channel-tree" class="ztree"></ul>
                                    </div>
                                </div>
                                <div class="channel-right">
                                    <div class="tools pl-4 mt-4">
                                        <div class="input-group right mr-2" style="width: 30%;float: left; height: 31px;">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text"><i class="fa fa-level-up"></i></span>
                                            </div>
                                            <input type="text" id="parent-name" value="网站根栏目" readonly class="form-control" style="height: 31px">
                                            <input type="hidden" id="parent-id" value="0"/>
                                        </div>
                                        <button id="create-category" class="btn btn-success btn-sm pl-4 pr-4">添加子栏目</button>
                                    </div>
                                    <div class="data-list pl-4 mt-2">
                                        <div id="data-table" style="max-height: 640px;overflow-y: auto;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <#include "/admin/common/footer.html"/>
</div>
<script src="${una}/admin/plugins/jquery/jquery.min.js"></script>
<script src="${una}/admin/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="${una}/admin/js/adminlte.min.js"></script>
<script type="text/javascript" src="${una}/admin/plugins/zTree_v3/js/jquery.ztree.all.js"></script>
<script type="text/javascript" src="${una}/admin/js/dom-resize.js"></script>
<script type="text/javascript" src="${una}/admin/plugins/layer/layer.js"></script>
<script src="${una}/admin/js/navigation.js"></script>
<script type="text/javascript">
    var reloadData;
    $(function(){
        var ztreeObj;
        var settings = {
            async:{
                enable:true,
                autoParam:['id','name','pid'],
                type:'get',
                url:'${una}/admin/category/treeNodes'
            },
            callback:{
                onAsyncSuccess:expandAll,
                onClick:onClick,
            },
            data:{
                simpleData:{
                    enable:true,
                    idKey:'id',
                    pIdKey:'pid',
                    rootPid:-1
                }
            },
            view:{
                showIcon:true
            }
        }
        ztreeObj = $.fn.zTree.init($("#channel-tree"),settings,[]);
        function expandAll(){
            ztreeObj.expandAll(true);
        }
        function onClick(event,treeId,treeNode){
            var id = treeNode.id;
            var name = treeNode.name;
            $("#parent-id").val(id);
            $("#parent-name").val(name);
           $.ajax({
               type:"GET",
               url:'${una}/admin/category/subData',
               data:{
                   pid:id
               },
               success:function(page){
                   $("#data-table").html(page);
               }
           });
        }
        computerWidth();
        initDataTable();
        $(".container-fluid").resize(function(){
            computerWidth();
        });
        function computerWidth(){
            var channel_left_width = $(".channel-left").width();
            var content_wrapper_width = $(".container-fluid").width();
            $(".channel-right").width(content_wrapper_width - channel_left_width-30);
        }

        function initDataTable(){
            $.ajax({
                type:"GET",
                url:'${una}/admin/category/subData',
                success:function(page){
                    $("#data-table").html(page);
                }
            });
        }

        $("#create-category").on("click",function(){
           var pid = $("#parent-id").val();
            layer.open({
                type:2,
                title:"创建新栏目",
                shadeClose:false,
                shade:0.4,
                offset:['55px'],
                area:['550px','700px'],
                content:"${una}/admin/category/"+pid+"/create",
                resize:false,
                anim:1
            });
        });
        reloadData = function(id){
            ztreeObj=$.fn.zTree.init($("#channel-tree"),settings,[]);
            $.ajax({
                type:"GET",
                url:'${una}/admin/category/subData',
                data:{
                    pid:id
                },
                success:function(page){
                    $("#data-table").html(page);
                }
            });
        }

        $(document).on("click",".delete-category",function(){
            var that = $(this);
            var id = $(this).attr("data-id");
            layer.alert("你确定删除该栏目吗？",{
                title:'系统提示',
                icon:0,
                btn:['是(Y)','否(N)']
            },function(index){
               var load = layer.load(2,{shade:[0.4,'#f0f0f0f0']});
               $.ajax({
                   type:'DELETE',
                   url:'${una}/admin/category/'+id,
                   success:function(){
                       layer.close(load);
                       layer.close(index);
                       layer.msg("栏目已经删除",{icon:1});
                       var node = ztreeObj.getNodeByParam('id',id);
                       ztreeObj.removeNode(node);
                       that.parents('tr').remove();
                   },
                   error:function(data){
                       layer.close(load);
                       layer.close(index);
                       layer.alert(data.responseText,{title:'系统提示信息',icon:0});
                   }
               })
            },function(index){
                layer.close(index);
            });
        });

        $(document).on("click",".edit-category",function(){
           var id = $(this).attr("data-id");
           layer.open({
               type:2,
               title:"修改栏目",
               shadeClose:false,
               shade:0.4,
               offset:['55px'],
               area:['550px','700px'],
               content:"${una}/admin/category/"+id+"/update",
               resize:false,
               anim:1
           });
        });
    });
</script>
</body>
</html>
